<template>
	<s-layout navbar="inner1" title="我的收益">
		<assNavbar title="我的收益" :background="{
			img:sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png'),
			BGcolor:'transparent'
		}" />
		<image class="bgTop" :src="sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png')" />
		<view class="bg-white">

			<view class="ss-flex ss-p-l-24">
				<button v-for="(item,index) in btnList" :key="item.value" @tap="incomeChange(item)"
					class="ss-reset-button btn" :class="{'btn-act':state.btnIndex==item.value}">
					{{item.name}}
				</button>
			</view>
			<template v-if="state.btnIndex==1||state.btnIndex==3||state.btnIndex==2">

				<view class="bg-white" style="flex:1">
					<!-- 钱包卡片 -->
					<view class="header-box ss-m-x-24 ss-m-t-30">
						<view class="ss-flex font-w ss-m-b-20">
							<view style="font-size:30rpx">{{calcTitle}}（元）</view>
							<view @tap="state.showMoney = !state.showMoney" class="ss-eye-icon font-3"
								:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"></view>
						</view>
						<view class="font-w" style="font-size:40rpx">{{state.showMoney?state.total_income:'******'}}
						</view>

						<view class="ss-flex ss-m-t-40 text-center" style="color:#647BB0;line-height: 2em;">
							<view class="">
								<view>待结算</view>
								<view>{{state.showMoney?state.pending_amount:'****'}}</view>
							</view>
							<view class="ss-m-x-80">
								<view>已结算</view>
								<view>{{state.showMoney?state.settled_amount:'****'}}</view>
							</view>
							<view class="">
								<view>已退款</view>
								<view>{{state.showMoney?state.refunded_amount:'****'}}</view>
							</view>
						</view>
					</view>
				</view>

				<withdraw-card :data="state.can_withdraw"></withdraw-card>
				<!-- <org-team :data="state.team" v-if="state.btnIndex==2"></org-team> -->

				<su-sticky class="ss-m-t-20">

					<view class="listScreen ss-flex ss-row-around ss-p-x-20"
						:style="{top: sheep.$platform.device.statusBarHeight + 94 + 'px'}">

						<uni-datetime-picker v-model="state.date" type="daterange" @tap="openTypeList(0)"
							@change="onChangeTime" :end="state.today">
							<view class="listScreen-item  ss-flex ss-row-center ss-p-l-20"
								style="min-width:250!important;width:max-content!important"
								:class="{ active_color: state.type==0,unactive_color:state.type!=0}">
								<view>{{ dateFilterText }}</view>
								<uni-icons class="ss-m-l-10" type="bottom" size="10"></uni-icons>
							</view>
						</uni-datetime-picker>

						<view class="listScreen-item ss-flex ss-row-center" @tap="openTypeList(1)"
							:class="{ active_color: state.type==1,unactive_color:state.type!=1}">
							<view>{{state.typeText}}<uni-icons class="ss-m-l-10" type="bottom" size="10"></uni-icons>
							</view>
						</view>
						<view class="listScreen-item ss-flex ss-row-center" @tap="openTypeList(2)"
							:class="{ active_color: state.type==2,unactive_color:state.type!=2}">
							<view>{{state.statusText}}<uni-icons class="ss-m-l-10" type="bottom" size="10"></uni-icons>
							</view>
						</view>
					</view>
				</su-sticky>
				<view style="height:20rpx;background:#F6F6F6"></view>
				<view class="bg-white ss-m-t-20 ">
					<view class="ss-flex ss-p-l-38">
						<image style="width:33rpx;height:30rpx"
							:src="sheep.$url.cdn('/storage/myicon/202503201009151566.png')" />
						<view class="font-w ss-m-l-12" style="color:#303335;font-size:30rpx">收益明细</view>
					</view>
					<scroll-view :style="{ height: pageHeight + 'rpx' }" scroll-y="true" :scroll-with-animation="false"
						:enable-back-to-top="true">
						<view v-for="item in state.list" :key="item.id" class="ss-p-38 font-1"
							style="border-bottom:2rpx solid #EDEDED">
							<view class="ss-flex justify-between">
								<view>{{item.type_text}}</view>
								<view style="color:#DE4330">{{item.amount}}</view>
							</view>
							<view class="ss-flex justify-between ss-m-t-22">
								<view style="color:#9C9C9C">{{item.update_time}}</view>
								<view :style="{color:
									item.status=='settled'?'#2A6DDF':
									item.status=='pending'?'#0CBCBA':'#D83724'
								}">{{item.status_text}}</view>
							</view>
						</view>
						<s-empty v-if="state.list.length == 0" :icon="sheep.$url.cdn('/mengchong/data-empty.png','ygb')"
							text="暂无数据"></s-empty>

						<uni-load-more v-if="true" :status="state.loadStatus" :content-text="{
					      contentdown: '上拉加载更多',
					    }" @tap="loadmore" />
					</scroll-view>
				</view>
			</template>


			<!-- <org v-if="state.btnIndex==2"></org> -->
		</view>


	</s-layout>

	<fui-actionsheet :show="state.showType" :itemList="showList" @click="typeClick"
		@cancel="state.showType=false"></fui-actionsheet>


</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import assNavbar from "@/components/ass-navbar.vue"
	import uniDatetimePicker from "../components/uni-datetime-picker/uni-datetime-picker.vue"
	import org from "../components/org.vue"
	import sheep from '@/sheep';
	import dayjs from 'dayjs';
	import _ from 'lodash';
	import fuiActionsheet from "../components/fui-actionsheet/fui-actionsheet.vue";
	import withdrawCard from './component/withdraw-card.vue';
	import orgTeam from './component/org-team.vue';
	const sys_navBar = sheep.$platform.navbar; //标题栏高度
	const {
		screenHeight,
		safeAreaInsets,
		screenWidth,
		safeArea
	} = sheep.$platform.device;
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const pageHeight =
		(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sys_navBar - 750;
	const state = reactive({
		btnIndex: 1,
		showMoney: false,
		total_income: '0.00',
		pending_amount: '0.00',
		settled_amount: '0.00',
		refunded_amount: '0.00',
		can_withdraw:'0.00',
		today: '',
		date: [],
		page: 0,
		list: [],
		listType: 'all',
		listStatus: 'all',
		showType: false,
		typeText: '全部收益',
		statusText: '全部结算',
		loadStatus: 'more',
		team:{},
		source_type: 'platform', // 收益来源类型：platform-平台收益（默认），payment-支付收益
	}); 
	const showList = ref([]);
	const typeList = [
		{
			name: "全部收益",
			value: "all"
		},
		{
			name: "商品分享收益",
			value: "payment_pay"
		},
		
		// {
		// 	name: "邀请收益",
		// 	value: "invite_vip"
		// },
		// {
		// 	name: "转让BD收益",
		// 	value: "transfer_bd"
		// },
		// {
		// 	name: "本地分佣收益",
		// 	value: "local_commission"
		// },
		// {
		// 	name: "电商分佣收益",
		// 	value: "ecommerce_commission"
		// },
		// {
		// 	name: "支付码收益",
		// 	value: "payment_code"
		// }
	];
	const statusList = [{
			name: "全部结算",
			value: "all"
		},
		{
			name: "待结算",
			value: "pending"
		},
		{
			name: "已结算",
			value: "settled"
		},
		{
			name: "已退款",
			value: "refunded"
		},
	];
	const btnList = [{
			name: '平台收益',
			value: 1
		},
		{
			name: '支付收益',
			value: 3
		},
		{name:'我的团队',value:2},
	]
	
	const calcTitle = computed(()=>{
		return state.btnIndex==1?'我的收益':(state.btnIndex==2?'团队收益':'支付收益')
	})
	
	const dateFilterText = computed(() => {
		if (state.date.length == 0) {
			return '全部时间'
		} else {
			if (state.date[0] === state.date[1]) {
				return state.date[0];
			} else {
				return state.date.join('~');
			}
		}

	});

	function openTypeList(e) {
		state.type = e;
		if (e == 1) {
			showList.value = typeList.map(v => v.name)
			state.showType = true;
		} else if (e == 2) {
			showList.value = statusList.map(v => v.name)
			state.showType = true;
		}
	}

	function onChangeTime(e) {
		state.date[0] = e[0];
		state.date[1] = e[e.length - 1];
		// state.pagination = pagination;
		// getLogList();
		clearList()
		getList()
	}

	function incomeChange(item) {
		console.log('incomeChange', item)
		state.btnIndex = item.value
		state.settled_amount = '0.00'
		state.refunded_amount = '0.00'
		state.pending_amount = '0.00'
		state.total_income = '0.00'
		state.can_withdraw = '0.00'
		state.source_type = item.value == 1 ? 'platform'  : item.value == 3 ? 'payment' : ''
		clearList()
		if (item.value == 1) { // 平台收益
			getList()
		} else if (item.value == 3) { // 支付收益
			getList()
		}
	}

	function clearList() {
		state.page = 0
		state.list = []
		state.loadStatus = 'more'
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList()
		} else {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
		}
	}

	function appendTimeHMS(arr) {
		if (arr[0]) {
			return [arr[0] + ' 00:00:00', arr[1] + ' 23:59:59'];
		} else {
			return []
		}
	}

	async function getList() {
		state.loadStatus = 'loading'
		let {
			data,
			error
		} = await sheep.$api.user.income.platformRevenue({
			page: state.page + 1,
			status: state.listStatus,
			type: state.listType,
			date: appendTimeHMS(state.date),
			source_type: state.source_type
		})
		console.log('getList::', data)
		if (error == 0) {
			state.list.push(...data.list.data)
			state.settled_amount = data.settled_amount
			state.refunded_amount = data.refunded_amount
			state.pending_amount = data.pending_amount
			state.total_income = data.total_income
			state.page = data.list.current_page
			state.can_withdraw = data.can_withdraw||'0.00'
			state.loadStatus = data.list.data.length == data.list.per_page ? 'more' : 'no-more'
		}
	}


	function typeClick(v) {
		console.log('typeClick', v)
		if (state.type == 1) {
			state.typeText = v.text;
			state.listType = typeList[v.index].value
		} else {
			state.statusText = v.text;
			state.listStatus = statusList[v.index].value
		}
		state.showType = false;
		clearList()
		getList()
	}
	
	async function getTeamData() {
		let res = await sheep.$api.user.org.getUserTeam()
		if (res.error == 0) {
			state.team = res.data;
		}
	}

	onLoad(async (options) => {
		// 获取今天日期
		getList();
		getTeamData();
	});

	onReachBottom(() => {
		loadmore()
	});
</script>

<style lang="scss" scoped>
	:deep().page-body {
		background: #fff !important
	}

	.listScreen {
		position: sticky;
		z-index: 10;
		height: 120rpx;
		background-color: #fff;

		.listScreen-item {
			font-size: 28rpx;
			width: 250rpx;
		}
	}

	.active_color {
		color: #085285;
	}

	.unactive_color {
		color: #838587;
	}

	// 钱包
	.header-box {
		background: linear-gradient(90deg, #BAE2F9 0%, #F1CEEE 100%);
		border-radius: 30rpx;
		padding: 33rpx 33rpx 20rpx 33rpx;
		color: #085285;
		font-size: 26rpx;
		position: relative;
		z-index: 10
	}

	.font-w {
		font-weight: bold;
	}

	.bgTop {
		width: 100%;
		height: 331rpx;
		margin-top: v-bind('-sys_navBar+"px"');
		margin-bottom: -200rpx
	}

	.btn {
		padding: 0 30rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		border: 1rpx solid #2A6DDE;
		background: rgba(42, 109, 222, 0.12);
		color: #2A6DDE;
		margin-right: 20rpx
	}

	.btn-act {
		background: #2A6DDE;
		color: #FFFFFF;
	}

	.filter-box {
		height: 114rpx;
		background-color: $bg-page;

		.total-box {
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-9;
		}

		.date-btn {
			background-color: $white;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-6;

			.ss-seldate-icon {
				font-size: 50rpx;
				color: $dark-9;
			}
		}
	}
</style>